<template>
    <div id="templ">
       <!--1.0图片详情和缩略图-->
        <div id="desc">
            <!--图片详情-->
            <div class="title">
                <h4>{{photoinfo.title}}</h4>
                <p>
                    {{photoinfo.add_time |datefmt('YYYY-MM-DD HH:mm:ss')}}  {{photoinfo.click}}次浏览
                </p>
                <p class="line"></p>
            </div>
            <!--缩略图样式 -->
            <div class="mui-content">
                <ul class="mui-table-view mui-grid-view mui-grid-9">
                    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" v-for="(item, index) in list" :key="index">
                        <img class="preview-img"  :src="item.src" height="100" @click="$preview.open(index, list)">
                    </li>
                </ul>
            </div>
            <!--图片摘要部分-->
            <p v-html="photoinfo.content"></p>
        </div>
        <!--2.0集成评论插件-->
        <div id="comment">
         <comment :id="id"></comment>
        </div>
    </div>
</template>
<script>
    //导入评论组件
    import comment from '../subcom/comment.vue';
    import common from '../../kits/common.js';
    import { Toast } from 'mint-ui';
    export default {
        components:{
            comment//注册评论组件
        },
        data(){
            return{
                id:0,
                photoinfo:{},
                list: []//存储缩略图数据
            }
        },
        created(){
            this.id=this.$route.params.id;
            //请求图片详情数据
            this.getinfo();
            //获取缩略图
            this.getphotoimg();
        },
        methods:{
            //1.0获取图片详细信息
             getinfo(){
              var url =common.apidomain+"/api/getimageInfo/"+this.id;
               this.$http.get(url).then(function (response) {
                var body = response.body;
                if(body.status !=0){
                    Toast(body.message);
                    return;
                }
                this.photoinfo=body.message[0];
            })
             },
            //获取缩略图
            //preview 需要的数据类型为src,w,h,后台返回的数据中没有w,h,需要给该对象手动添加w,h
            /*
            *  body.message.forEach(function(item){
            *  var img =document.screateElement('img');
            *  img.src =item.src;
            *   item.w=img.width;
            *   item.h=img.height;
            *    var img =new Image();
            *    img.src =item.src;
            *    当图片真正加载完成时,再为其设置宽高
            *    img.onload =function(){
            *      item.w =img.width;
            *      item.h =img.height;
            *    }
            * })
            *
            *
            * */
            getphotoimg(){
                var url =common.apidomain+"/api/getthumimages/"+this.id;
                this.$http.get(url).then(function (response) {
                    var body = response.body;
                    if(body.status !=0) {
                        Toast(body.message);
                        return;
                    }
                    body.message.forEach(function (item) {
                        /*
                        * var img =new Image();
                        * 相当于 var img  =document.createElement('img');
                        *
                        * */
                        var img =new Image();
                        img.src =item.src;
                        img.onload=function () {
                            item.w =img.width;
                            item.h =img.height;
                        }
                    });
                    this.list = body.message;
                })
            }
        }
    }
</script>
<style scoped>
/*图片详情宴样式*/
    #desc{
        padding:10px;
    }
    #desc h4{
        color: #0094ff;
    }
   #desc .title p{
     color:rgba(0,0,0,0.4);
     margin-top: 10px;
   }
   #desc .title .line{
       width: 100%;
       height: 1px;
       border-top:1px solid  rgba(0,0,0,0.4);
    }
.mint-swipe-item img{
    width: 100%;
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell{
    border-right: 0px;
    border-bottom: 0px;
}
.mui-grid-view.mui-grid-9{
    border-top: 0px;
    border-left: 0px;
    background-color: #fff;
}
    /*九宫格*/
    .mui-content img{
        width: 100px;
        height: 100px;
    }
</style>